<template>
  <!-- 我的工单 -->
  <view>
    <view>
      <z-paging :paging-style="{ 'background-color': '#F7F7F7' }" :empty-view-error-text="`对不起,页面走丢了\n请刷新试试`"
        :empty-view-text="`暂无订单`" :show-empty-view-reload-when-error="false" ref="paging" v-model="list"
        @query="queryList" :fixed="true" width="100%" height="100%">
        <template #top>
          <view>
            <up-tabs :list="tabs" :scrollable="true" :current="currentTabIndex" @change="onTabChange" :activeStyle="{
              color: '#000',
              fontWeight: '600',
              fontSize: '28rpx',
            }" :inactiveStyle="{
        color: '#666666',
        fontSize: '28rpx'
      }" lineWidth="36rpx" lineHeight="8rpx" lineColor="linear-gradient( 98deg, #FFF1B8 0%, #FFD856 100%)"></up-tabs>
            <view>
              <up-tabs :list="lister" :scrollable="true" :activeStyle="{
                color: '#FFFFFF',
                weight: '160rpx',
                height: '52rpx',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                paddingLeft: '60rpx',
                paddingRight: '60rpx',
                textAlign: 'center',
                fontWeight: '500',
                fontSize: '22rpx',
                borderRadius: '10rpx',
                background: 'linear-gradient( 90deg, #000000 0%, #535353 100%)'
              }" :inactiveStyle="{
        color: '#666666',
        fontSize: '22rpx',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }" lineWidth="62rpx" lineHeigh="8rpx" lineColor="linear-gradient( 98deg, #FFF1B8 0%, #FFD856 100%)"></up-tabs>
            </view>
          </view>

        </template>
        <view class="px-[32rpx] pt-[32rpx] w-[100%]">
          <cjgx-card v-for="item in list" :key="item.id" :item="item" class="mb-[24rpx]" />
        </view>
      </z-paging>
    </view>
  </view>
  <popup-login v-model="userStore.showLoginPopup" />
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import useUserStore from '@/store/modules/user'
import { mywork } from '@/api/bwsc.js'
const userStore = useUserStore()

// 筛选
const tabs = ref([{ name: '超级线索' }, { name: '超级共享' }, { name: '赠送' },{ name: '报废' }, { name: '买家' }, { name: '货车' }])
// 当前选中的tab索引
const currentTabIndex = ref(0)
// 当前选中的线索类型
const currentClueType = ref(0) // 初始化为0，对应“超级线索”
//状态
// const lister = ref([{ name: '全部 1080' }, { name: '待跟进 1080' }, { name: '已跟进 1080' }, { name: '已免单 1080' }])

const list = ref([]);
const paging = ref(null);

// tab切换事件
const onTabChange = (event) => {
  // 从事件对象中获取索引值
  const index = event.index;
  currentTabIndex.value = index;
  // 根据索引设置线索类型：0-超级线索，1-共享线索，2-普通线索
  currentClueType.value = index;
  // 重新加载数据
  paging.value.reload();
}

const queryList = async (pageNum, pageSize) => {
  try {
    console.log('currentClueType type:', typeof currentClueType.value, 'value:', currentClueType.value);
    const from = {
      pageNum: pageNum,
      pageSize: pageSize,
      userId: userStore.userId,
      clueType: currentClueType.value
    };
    console.log('API params (from):', JSON.stringify(from)); // 打印将要发送的参数

    const res = await mywork(from);
    if (res.code == 200 && res.rows) {
      paging.value.complete(res.rows);
    } else {
      paging.value.complete([]);
    }
  } catch (e) {
    console.log('报错=>', e);

    paging.value.complete(false);
  }
};
</script>

<style lang="scss" scoped>
:deep(.u-tabs__wrapper__nav__item) {
  padding: 0 25rpx !important; 
}
</style>